<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圆角边框</title>

        <style>
            .border-radius{
                width: 400px;
                height: 200px;
                margin: 50px auto;
                border-top: 10px solid blue;
                border-bottom: 10px solid red;
                border-right: 10px solid gray;
                border-left: 10px solid green;
                border-radius: 50px 100px 150px 200px/50px 100px 150px 200px;/*左上右右下左下   前面是水平半径，后面是垂直半径*/
            }
        </style>

    </head>
    <body>

    <div class="border-radius"></div>

    </body>
</html>